<template>
  <div >
    <div class="chart-name-select" >
      <!-- uesrtype<4 -->
      <el-radio v-model="panelType" :label="item.label" size="mini" v-for="(item,index) in tabList" :key="index">
        <img :src="item.imgSrc" alt />
        {{item.text}}
      </el-radio>
      <!-- <el-radio v-model="panelType" label="2" size="mini">
        <img src="/img/correlation-net.png" alt />
        网络
      </el-radio>
      <el-radio v-model="panelType" label="1b" size="mini">
        <img src="/img/correlation-trend.png" alt />
        用户趋势
      </el-radio>
      <el-radio v-model="panelType" label="2b" size="mini">
        <img src="/img/correlation-net-coverage.png" alt />
        覆盖趋势
      </el-radio> -->
    </div>

    <div class="chart-net-select"  >
      <!-- <el-radio v-show=" panelType != 2 && panelType != '2b' "  v-model="panelCellType" label="0" border size="mini" >全部</el-radio> -->
      <el-radio v-show=" panelType != 1 && panelType != '1b' " v-model="panelCellType" label="4" border size="mini" >4G</el-radio>
      <el-radio v-show=" panelType != 1 && panelType != '1b' " v-model="panelCellType" label="5" border size="mini" >5G</el-radio>
    </div>

    <!-- 图表 -->
    <div class="analysis-box" >
      <data-analysis-echarts ref="dataCharts" ></data-analysis-echarts>
    </div>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapState: mapStateForm, mapMutations: mapMutationsForm, } = createNamespacedHelpers("gisForm");

import DataAnalysisEcharts from './dataAnalysisEcharts'
export default {
  name: 'DataAnalysis',
  components: { DataAnalysisEcharts },

  data(){
   return{
    // 详情tab列表
     tabList:[
      {label:'1',imgSrc:require('Public/img/correlation-user.png'),text:'用户'},
      {label:'2',imgSrc:require('Public/img/correlation-net.png'),text:'网络'},
      {label:'1b',imgSrc:require('Public/img/correlation-trend.png'),text:'用户趋势'},
      {label:'2b',imgSrc:require('Public/img/correlation-net-coverage.png'),text:'覆盖趋势'},
     ],
   }

  },
  watch: {
    // 根据usertype切换选择tablist
    'gisForm.userType'(val){
     this.changeTabList(val)
    }
  },
  computed: {
    ...mapState(['gisForm']),
    'panelType':{
      get() { return this.gisForm.panelType },
      set(nv) { this.setPanelType(nv) }
    },
    'panelCellType':{
      get() { return this.gisForm.panelCellType },
      set(nv) { this.setPanelCellType({ data: nv }) }
    },

  },
  methods: {
    ...mapMutationsForm([
      'setPanelType',
      'setPanelCellType'
    ]),
    changeTabList(val){
      if(val&&val>3){
        this.tabList=[
      {label:'1',imgSrc:require('Public/img/correlation-user.png'),text:'用户'},
      {label:'1b',imgSrc:require('Public/img/correlation-net.png'),text:'用户趋势'}
      ]
      }else{
        this.tabList=[
      {label:'1',imgSrc:require('Public/img/correlation-user.png'),text:'用户'},
      {label:'2',imgSrc:require('Public/img/correlation-net.png'),text:'网络'},
      {label:'1b',imgSrc:require('Public/img/correlation-trend.png'),text:'用户趋势'},
      {label:'2b',imgSrc:require('Public/img/correlation-net-coverage.png'),text:'覆盖趋势'},
     ]
      }
    },
  },
  created() {
  }
}
</script>

<style scoped>
.chart-name-select {
  height: 26px;
  background: #edecf1;
}

.analysis-box {
  min-height: 40px;
  overflow: auto;
  margin-top: 10px;
}

.chart-net-select {
  height: 20px;
}
</style>
